<template>
    <div class="banner-x">
        <!-- 导航点 -->
        <div 
            class="points"
            v-if="pageNum > 1">
            <div  
                v-for="n in pageNum"
                :key="n"
                :class="{'point':true,'active':(n-1) == pageIndex}">
            </div>
        </div>
        <div 
            class="photos"
            ref="bannerEle"
            @touchstart.stop ='moveStart($event)'
            @touchmove.stop ='moving($event)'
            @touchend.stop ='moveEnd($event)'>
            <!-- 这是移动端的左右滑动组件 -->
            <slot></slot>
        </div>
    </div>

</template>

<script>
export default {
    name: 'bannerX',
    props: {
        pageNum: Number, //总页数
        pageWidth: Number
    },
    data() {
        return {
            nowX: 0, // 元素的水平位置
            newX: 0, // 移动时的新水平位置
            startX: 0, // 移动开始的坐标
            startY: 0,
            moveX: 0, // 移动中的坐标
            moveY: 0, 
            distanceX: 0, // 移动的相对坐标
            distanceY: 0, 
            endX: 0, // 移动结束的坐标
            endY: 0,
            isMoving: false,
            active_dis : 10, // 移动超过10px，表示移动此方向
            isWASD : -1, // -1表示不确定方向 0：上 1：右 2：下 3：左 
            pageIndex: 0,
            pageWid: 0,
            touchSpeed: 1.2, // 元素移动速度相对手指的移动速度的倍率
            animateMoving: false, // 动画正在实现
            timer: null, // 动画计时器
            free_timer: null // 自动轮播
        }
    },
    methods: {
        // 移动开始
        moveStart(e) {
            this.liftDefault();
            this.stopDefault();
            // 若动画正在移动，就直接退出函数
            if(this.animateMoving) {
                return;
            }
            // console.log('开始移动','x',e.targetTouches[0].pageX,'y',e.targetTouches[0].pageY);
            this.startX = e.targetTouches[0].pageX;
            this.startY = e.targetTouches[0].pageY;
            this.isMoving = true;
        },
        // 正在移动
        moving(e) {
            // 若动画正在移动，就直接退出函数
            if(this.animateMoving) {
                return;
            }
            // console.log('正在移动',this.isMoving);
            // console.log(e);
            this.moveX = e.changedTouches[0].pageX;
            this.moveY = e.changedTouches[0].pageY;
            // console.log('正在移动','x',this.moveX,'y',this.moveY);
            // console.log('正在移动',this.isWASD);
            this.distanceX = this.moveX - this.startX;
            this.distanceY = this.moveY - this.startY;
            // 移动方向还没确定
            if(this.isWASD == -1){
                // 上
                if(this.distanceY <= -1*this.active_dis){
                    this.isWASD = 0;
                    this.liftDefault();
                    this.isMoving = false;
                } 
                // 下
                else if(this.distanceY >= this.active_dis){
                    this.isWASD = 2;
                    this.liftDefault();
                    this.isMoving = false;
                }
                // 左
                else if(this.distanceX <= -1*this.active_dis){
                    this.isWASD = 3;
                }
                // 右
                else if(this.distanceX >= this.active_dis){
                    this.isWASD = 1;
                }
            }
            // 若确定左右移动
            if(this.isWASD == 3){
                this.newX = this.nowX + this.distanceX *this.touchSpeed;
                // 若移动超过半个屏幕，则暂停移动
                if(this.newX <= - (this.pageNum-1)* this.pageWid - this.pageWid /4){
                    this.newX = - (this.pageNum-1)* this.pageWid - this.pageWid /4;
                }
                if(this.newX >= this.pageWid /4){
                    this.newX = this.pageWid /4;
                }
                // 跟着手指移动
                this.setX(this.newX);
            }
            if(this.isWASD == 1){
                this.newX = this.nowX + this.distanceX *this.touchSpeed;
                // 若移动超过半个屏幕，则暂停移动
                if(this.newX <= - (this.pageNum-1)* this.pageWid - this.pageWid /4){
                    this.newX = - (this.pageNum-1)* this.pageWid - this.pageWid /4;
                }
                if(this.newX >= this.pageWid /4){
                    this.newX = this.pageWid /4;
                }
                // 跟着手指移动
                this.setX(this.newX);
            }
            // console.log('banner this.nowX',this.nowX);
        },
        // 移动结束
        moveEnd(e) {
            // 若动画正在移动，就直接退出函数
            if(this.animateMoving || !this.isMoving) {
                this.isWASD = -1;
                this.isMove = false;
                return;
            }
            // console.log('结束移动', this.animateMoving, this.isMoving, 
                        // 'this.nowX',this.nowX,'this.newX',this.newX);
            this.endX = e.changedTouches[0].pageX;
            this.endY = e.changedTouches[0].pageY;
            this.animateMoving = true; // 动画正在移动

            // 若确定左右移动, 则开始移动元素
            if(this.isWASD == 3){
                // 更新现在的元素位置
                this.nowX = this.newX;
                for(let i =0;i<this.pageNum;i++){
                    if(this.nowX > - i* this.pageWid - this.pageWid / 2){
                        this.newX = - i* this.pageWid;
                        this.pageIndex = i;
                        break;
                    }
                }
                if(this.nowX <= - (this.pageNum-1)* this.pageWid ){
                    this.newX = -(this.pageNum-1)*this.pageWid;
                    this.pageIndex = this.pageNum-1;
                }
            }
            if(this.isWASD == 1){
                // 更新现在的元素位置
                this.nowX = this.newX;
                for(let i =0;i<this.pageNum;i++){
                    if(this.nowX > - i* this.pageWid - this.pageWid / 2){
                        this.newX = - i* this.pageWid;
                        this.pageIndex = i;
                        break;
                    }
                }
                if(this.nowX <= - (this.pageNum-1)* this.pageWid ){
                    this.newX = -(this.pageNum-1)*this.pageWid;
                    this.pageIndex = this.pageNum-1;
                }
            }
            // console.log('banner this.nowX',this.nowX);
            // console.log('banner this.pageNum',this.pageNum);
            // console.log('banner this.pageWid',this.pageWid);
            // console.log('banner this.newX',this.newX);

            // 开始移动动画
            this.animateDoing(this.newX);
            // 移动结束重置状态

            // console.log('this.pageIndex',this.pageIndex);
            this.isWASD = -1;
            this.isMoving = false;
        },
        // 禁止页面上下滚动
        // 禁止的函数
        preventDef(e) {
            e.preventDefault()
        },
        stopDefault() {
            // console.log('锁定');
            document.body.addEventListener('touchstart', this.preventDef, {passive: false})
            document.body.addEventListener('touchmove', this.preventDef, {passive: false})
        },
        // 解禁页面上下滚动
        liftDefault() {
            // console.log('解除');
            document.body.removeEventListener('touchstart', this.preventDef)
            document.body.removeEventListener('touchmove', this.preventDef)
        },
        // 获取网页宽度
        getWidth() {
            this.pageWid = parseFloat(document.documentElement.style['fontSize'])* this.pageWidth;
            // console.log(document.documentElement.style['fontSize']);
            // console.log('this.pageWid',this.pageWid);
        },
        // 动画函数
        animateDoing(position) {
            if(this.timer != null) {
                return;
            }
            this.timer = setInterval(()=>{
                let step = (position - this.nowX)/5;
                step = step < 0 ? Math.floor(step) : Math.ceil(step);
                this.nowX = this.nowX + step;
                if(Math.abs(this.nowX - position) <= 5){
                    this.nowX = position;
                    this.setX();
                    this.animateMoving = false;
                    this.liftDefault();
                    clearInterval(this.timer);
                    this.timer = null;
                    return ;
                }
                this.setX();
            },1)
        },
        // 设置父盒子的偏移量
        setX(newX) {
            if(newX == undefined){
                newX = this.nowX;
            }
            // console.log('this.$refs',this.$refs.bannerEle);
            if(this.$refs.bannerEle == undefined){
                return;
            }
            // console.log('this.$refs.bannerEle',this.$refs.bannerEle.style);
            this.$refs.bannerEle.style.transform= 'translateX('+ newX +'px)';
            
        },
        // 移动至此下标
        gotoIndex(i) {
            this.newX = - i* this.pageWid;
            this.pageIndex = i;
            // 开始移动动画
            // console.log('goto index',this.newX);
            this.animateDoing(this.newX);
        },
        // 自动轮播
        free_playing() {
            this.destory_playing();
            this.free_timer = setInterval(()=>{
                // console.log('this.isMoving',this.isMoving);
                // console.log('this.animateMoving',this.animateMoving);
                if(this.isMoving || this.animateMoving){
                    return;
                }

                if(this.pageIndex< this.pageNum -1){
                    this.gotoIndex(this.pageIndex + 1);
                }
                else {
                    this.gotoIndex(0);
                }
                // console.log('free_play',this.pageIndex);
            },2500)
        },
        // 移动轮播图后，等待3秒开始轮播
        destory_playing() {
            clearInterval(this.free_timer);
            this.free_timer = null;
        }
    },
    mounted() {
        this.getWidth();
        window.addEventListener('resize',this.getWidth);
        this.free_playing();
        // this.gotoIndex(1);
        // this.pageNum = this.$store.state.bStore.urls.length;
        // console.log('this.pageNum',this.pageNum);
    },
    computed: {
        // activeIndex() {
        //     return this.$store.state.bStore.activeIndex;
        // }
    },
    destroyed() {
        // console.log('bannerX','销毁了');
        this.destory_playing();

        window.removeEventListener('resize',this.getWidth);
        clearInterval(this.timer);
        clearInterval(this.free_timer);
        this.liftDefault();
    },
    watch: {
        isMoving(v) {
            if(!v) {
                this.free_playing();
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
.banner-x {
    width: 100%;
    height: 100%;
    position: relative;
    .points {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        padding: 5px 10px;
        background-color: rgba($color: #000000, $alpha: 0.6);
        z-index: 99;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        .point {
            width: 6px;
            height: 6px;
            background-color: rgb(173, 173, 173);
            border-radius: 50%;
            margin-right: 6px;
            &.active {
                background-color: #fff;
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }
}
.photos {
    display: flex;
    transform: translateX(0);
}
</style>